<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dfsd </title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
	<meta http-equiv="X-UA-Compatible" content="IE=9" />
    <script src="../public/jquery.min.js"></script>
</head>
<body>
	<div>
		<ul>
			<li>
				<span><h4>模板字符串实例</h4></span>
				<div id="ex1">

				</div>
			</li>
			<li>
				<span><h4>模板字符串2</h4></span>
				<div id="ex2">

				</div>
			</li>
		</ul>
	</div>
</body>
<script>
$(()=> {
// 模板字符串实例
let tableTmpl = (colums,data) => {
	return `<table>
	<tr> ${colums.map( colum => `<th>${colum.title}</th>`).join(' ')} </tr>
	${data.map( item => `<tr>${colums.map(colum => `<td>${item[colum.key]}</td>`).join(' ')}</tr>` ).join(' ')}
	</table>`
}
let colums = [
	{ title: '姓名', key: 'name' },
	{ title: '年龄', key: 'age' },
	{ title: '班级', key: 'class'},
]
let tData = [
	{name: '张三', age: '11', class: '一班' },
	{name: '李四', age: '12', class: '二班' },
	{name: '王五', age: '13', class: '三班' }
]

$('#ex1').html(tableTmpl(colums, tData))


})
</script>
</html>